<template>
	<div class="music-board" v-show="isShow">
		<iframe src="about:blank"></iframe>
		<ul class="music-board-playlist">
			<li v-for="song in songs" class="col-xs-3" @click="toAlbum(song.id)">
				<div>
					<img :src="song.cover" />
				</div>
				<p :title="song.title">{{song.title}}</p>
				<p :title="song.author">{{song.author}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				innerHtml: '',
				songs: [],
				isShow: true
			}
		},
		watch: {
			innerHtml: function() {
				var item = document.querySelector('.music-board iframe')
				var iframe = item.contentWindow
				iframe.document.write(this.innerHtml)

				this.getAlbum(item, iframe)
			}
		},
		methods: {
			toAlbum: function(id) {
				this.$store.dispatch('playlist', {
					id: id
				}).then(function(response) {
					console.log(response)
				})
			},
			getAlbum: function(item, iframe) {
				this.isShow = true
				var that = this
				var clock = setInterval(function() {
					var list = iframe.document.querySelectorAll('.m-cvrlst li')
					if(list.length > 0) {
						clearInterval(clock)
						var data = []
						list.forEach(function(value, index, array) {
							var url = value.querySelector('div a').href
							var id = url.split('=')[1]
							var cover = value.querySelector('div img').src
							var title = value.querySelector('p').innerText
							var author = value.querySelector('p:last-child').innerText
							data.push({
								id: id,
								url: url,
								cover: cover,
								title: title,
								author: author
							})
						})
						that.songs = data
						iframe.document.body.innerHTML = ''
					}
				}, 1000)
			}
		}
	}
</script>

<style>
	.music-board {
		min-height: 500px;
	}
	
	.music-board iframe {
		width: 100%;
		height: 500px;
		border: none;
		display: none;
	}
	
	ul.music-board-playlist {
		display: inline-block;
	}
	
	ul.music-board-playlist li {
		height: 200px;
		overflow: hidden;
		line-height: 1.4;
		padding: 0px 16px;
	}
	
	ul.music-board-playlist li div {
		position: relative;
		display: block;
		width: 140px;
		height: 140px;
		margin: 3px auto;
	}
	
	ul.music-board-playlist li img {
		width: 100%;
		height: 100%;
		display: block;
		box-shadow: -2px 2px 5px #888888;
		margin-bottom: 5px;
	}
	
	ul.music-board-playlist li p {
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		width: 100%;
		display: block;
		padding: 0px;
		margin: 0px;
	}
	
	ul.music-board-playlist li p:last-child {
		color: #222222;
	}
</style>